<template>
  <div class="DT">
    <div class="DT-1">
      <span>
        <img :src="newtext21.src" alt="">热门话题
        </span>
      <span>
        全部话题
        <img :src="newtext22.src" alt="">
      </span>
    </div>
    <div class="DT-2"><img :src="newtext3.src" alt="" ></div>
    <div class="DT-3">
      <div><img src="img/dongtai/guangchang/4.png" alt=""><span>热搜1</span></div>
      <div><img src="img/dongtai/guangchang/5.png" alt=""><span>热搜1</span></div>
      <div><img src="img/dongtai/guangchang/6.png" alt=""><span>热搜1</span></div>
      <div><img src="img/dongtai/guangchang/7.png" alt=""><span>热搜1</span></div>
    </div>
    <div class="DT-daohang">
      <van-tabs v-model="active" swipeable animated sticky>
        <van-tab title="热门" @click="fun('Remen')"><Remen/></van-tab>
        <van-tab title="最新" @click="fun('Zuixin')"><Zuixin/></van-tab>
        <van-tab title="视频" @click="fun('Shipin')"><Shipin/></van-tab>
        <van-tab title="附近" @click="fun('Fujin')"><Fujin/></van-tab>
      </van-tabs>
    </div>
   

  </div>
</template>

<script>
import Fujin from "./guangchang/fujin.vue"
import Remen from "./guangchang/remen.vue"
import Shipin from "./guangchang/shipin.vue"
import Zuixin from "./guangchang/zuixin.vue"
export default {
  data() {
    return {
      active: 0,
      com:'Tuijian'
    };
  },
  components:{
    Fujin,Remen,Shipin,Zuixin
  },
  methods:{
    fun(data){
        this.com=data
    }
  },
  created(){
    this.$store.dispatch("guangchangH",{url:"guangchang"})
  },
  computed:{
    newtext1(){
      return this.$store.state.guangchang.text1
    },
    newtext21(){
      return this.$store.state.guangchang.text21
    },
    newtext22(){
      return this.$store.state.guangchang.text22
    },
    newtext3(){
      return this.$store.state.guangchang.text3
    },
  }
};
</script>

<style scoped>
.DT{
  padding: .05rem;
  box-sizing: border-box;
}
  .DT-1{
    display: flex;
    justify-content: space-between;
  }
  .DT-1>span>img{
    height: .16rem;
  }
  .DT-2>img{
    width: 100%;
  }
  .DT-3{
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  .DT-3>div>img{
    height: .16rem;
  }
  .DT-3>div{
    width: 50%;
    padding: .05rem 0;
  }
  .DT-daohang{
    overflow: auto;
  }
</style>